<template>
	<view class="purchasing">
		<view class="header">
			<view class="form">
				<view class="select" style="display: flex; justify-content: space-between;align-items: center;">

					<view class="select-input" >
						供应商:{{formData.sname}}

					</view>
					<view style="margin-right: 40rpx;">
						总金额:
						<text class="price">{{ priceTotal || 0 | unifyNumber}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="article">
			<view class="title">
				<view class="text">货物清单</view>
			</view>
			<table border="0">
				<tr>
					<th>产品</th>
					<th>单价</th>
					<th>数量</th>
					<th>金额</th>
					<!-- <th>操作</th> -->
				</tr>
				<block v-if="list.length > 0">
					<tr style="height: 40px;" @longtap="edit(item, index)" v-for="(item, index) in list" :key="index">
						<td>{{ item.matName || item.matId || '0' }}</td>
						<td>{{ item.realPrice || '0' | unifyNumber}}</td>
						<td>{{ item.orderNum || '0' }}</td>
						<td>{{ item.orderNum * item.realPrice || 0 | unifyNumber}}</td>
						<!-- <td>
							<view class="btns">
								<view class="button-mini" @tap="edit(item, index)">编辑</view>
								<view class="button-mini" @tap="del(index)">删除</view>
							</view>
						</td> -->
					</tr>
					<tr>
						<td></td>
						<td></td>

					</tr>
				</block>

				<tr v-else>
					<td colspan="7">
						<u-divider textSize="34" text="暂无数据"></u-divider>
					</td>
				</tr>
			</table>
		</view>
		<u-gap height="88"></u-gap>
		<view class="footer_btn">
			<!-- <view class="button-primary">核算金额</view> -->
			<view @tap="submit" class="button-primary">确认修改</view>
		</view>
		<Supper ref="child" @saveUser="saveUser" />
	</view>
</template>

<script>
	import Supper from "../../components/supper.vue"
	import {
		mapState,
		mapGetters
	} from "vuex"
	export default {
		data() {
			return {
				formData: {
					orderIdPur: "",
					sid: "",
					sname: "",
				},
			};
		},
		computed: {
			...mapState("purchasing", ['list']),
			...mapGetters("purchasing", ["priceTotal"])
		},
		async onLoad(option) {
			this.formData.orderIdPur = option.orderIdPur
			await this.getList()

		},
		components: {
			Supper
		},
		// async onShow() {
		// },
		onReachBottom() {

		},
		// onHide() {
		// 	this.$store.state.purchasing.list = []
		// },
		methods: {
			del(index) {
				uni.showModal({
					title: "确定删除吗？",
					success: (res) => {
						if (res.confirm) {
							this.$store.state.purchasing.list.splice(index, 1)
						}
					}
				})
			},
			async submit() {
				let formData = this.formData
				let details = this.list.map(item => ({
					matId: item.matId,
					id: item.id,
					matSku: item.matSku,
					orderNum: item.orderNum,
					realPrice: item.realPrice,
					remark: item.remark
				}))
				formData.details = details
				try {
					let data = await this.$api.updateOrderDetailApi(formData)
					if (data.code == 200) {
						uni.showToast({
							title: "修改成功！",
							icon: "none"
						})
						//await uni.$u.sleep(1500)
						uni.navigateBack()
					} else {
						// uni.showToast({
						// 	title: "服务器错误！",
						// 	icon: "error"
						// })
					}
				} catch (e) {
					//TODO handle the exception
					// uni.showToast({
					// 	title: "服务器错误！",
					// 	icon: "error"
					// })
				}

			},
			edit(item, index) {
				uni.navigateTo({
					url: `/pages/purchasing/purchaseDetailEdit?index=${index}&sid=${this.formData.sid}`
				})
			},
			async getList() {
				let formData = this.formData
				// uni.showLoading({
				// 	title: "加载中...",
				// });
				let requestData = uni.$u.deepClone(formData);
				Object.keys(requestData).map((item) => {
					if (requestData[item] == '' || requestData[item] == null || item == "sid" || item ==
						"sname") {
						delete requestData[item]
					}
				});
				let data = await this.$api.orderPurchaseDetailList({
					data: requestData
				})

				if (data.code == 200) {
					console.log(data);
					this.formData.sid = data.result.orderInfo.sid
					this.formData.sname = data.result.orderInfo.sname
					this.$store.state.purchasing.list = data.result.list
					if (data.result.list <= 0 && this.list.length > 0) {}
				}
				// uni.hideLoading();
			}
		},

	};
</script>

<style lang="scss" scoped>
	.purchasing {
		min-height: calc(100vh - 44px - env(safe-area-inset-top));

		.price {
			color: #fe3430;
		}

		.header {
			padding: 16rpx 29rpx;
			background-color: #fff;
		}

		.btns {
			display: flex;
			flex-direction: column;

			.button-mini {
				// flex: 1;
				margin: 6rpx auto;
				width: 100rpx;
			}

		}

		.form {
			.select {
				.text {
					margin: 20rpx 0;
					color: #bdbdbd;

					.text-icon {
						color: #fe3430;
					}

					.text-name {
						margin-left: 10rpx;
					}
				}

				input,
				.select-input {
					// width: 100%;
					height: 94rpx;
					// background: #f2f2f2;
					border-radius: 47rpx;
				}

				.select-input {
					font-size: 30rpx;
					color: #272727;
					padding: 0 36rpx;
					display: flex;
					align-items: center;

					.select-input-left {
						display: flex;
						justify-content: space-between;
						align-items: center;
						flex: 1;

						.changeBtn {
							background-color: #fe3430;
							width: 150rpx;
							margin-left: 20rpx;
							color: #fff;
							text-align: center;
							height: 80rpx;
							line-height: 80rpx;
							border-radius: 40rpx;
						}

						input {
							background: #f2f2f2;
							text-indent: 1em;
						}
					}
				}

				.input {
					display: flex;
					align-items: center;
					justify-content: space-between;

					input {
						width: 271rpx;
					}

					text {
						text-align: left;
					}
				}
			}
		}
	}

	.article {
		padding: 32rpx 20rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 30rpx;

			.text {
				font-size: 36rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #272727;
			}

			.add_btn {
				height: 60rpx;
				line-height: 60rpx;
				background: #fe3430;
				border-radius: 29rpx;
				color: #fff;
				padding: 0 20rpx;
			}
		}

		.price {
			margin-left: 16rpx;
			color: #fe3430;
		}

		table {
			border-radius: 20rpx;
			background-color: #fff;
			width: 100%;

			th {
				padding: 32rpx 0;
				border-bottom: 2rpx solid #f1f1f1;

				&:last-child {
					width: 130rpx;
				}
			}

			td {
				text-align: center;
			}
		}
	}

	.divider {
		width: 100%;
	}

	.footer_btn {
		display: flex;
		justify-content: space-around;
		position: absolute;
		bottom: 44px;
		width: 100%;
		left: 0;

		.button-primary {
			width: 280rpx;
		}
	}
</style>
